<!--
 * @Descripttion: 今日劳动力作业概况
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-14 22:35:53
-->
<!-- css/amap.css -->

<head>
    <link rel="stylesheet" href="/assets/css/amap.css" media="all">
</head>
<style>
    /* 特殊处理 */
    .row-edge .layui-form-select .layui-edge {
        margin-top: 0 !important
    }

    .row-edge .layui-form-select.layui-form-selected .layui-edge {
        margin-top: -5px !important
    }

    .total-map {
        height: calc(100vh - 440px);
    }
</style>


<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form label-top">

            <div class="title-row layuimini-title ">
                <div class="title-left">
                    <h4>
                        <i class="layui-icon layui-icon-return anticon mr-1" id="backBtn"></i>
                        <span>创建计时工单派发计划</span>
                    </h4>
                </div>
                <div class="title-right">
                    <span class="title-right-text">
                        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-on="closeBtn">取消</button>
                        <button class="layui-btn layui-btn-sm" lay-submit lay-filter="saveBtn">保存</button>
                    </span>
                </div>
            </div>

            <div class="section">
                <div class="solid p-5">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md4">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">计划名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="planName" lay-verify="required" lay-reqtext="计划名称不能为空"
                                        placeholder="请输入" value="" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">请求类</label>
                                <div class="layui-input-block">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                        name="businessNames" lay-search>
                                        <option value="1">报事</option>
                                        <option value="2">巡检</option>
                                        <option value="3">其他</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">工单积分</label>
                                <div class="layui-input-block">
                                    <input type="text" name="planScore" lay-verify="required" lay-reqtext="工单积分不能为空"
                                        placeholder="请输入" value="" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">作业周期</label>
                                <div class="layui-input-block">
                                    <input type="text" name="datePeriodStart" autocomplete="off" id="date_period_start"
                                        class="layui-input" placeholder="请选择">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">作业班次
                                    <span class="layui-font-gray layui-font-12">(工单将于作业当天0点派发)</span>
                                </label>
                                <div class="layui-input-block">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择" name="workClass"
                                        lay-search>
                                        <option value="1">报事</option>
                                        <option value="2">巡检</option>
                                        <option value="3">其他</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">考勤方式</label>
                                <div class="layui-input-block">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择" name="styleName"
                                        lay-search>
                                        <option value="1">报事</option>
                                        <option value="2">巡检</option>
                                        <option value="3">其他</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md4">
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">工作位置</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="addressName" lay-verify="required"
                                                lay-reqtext="工作位置不能为空" placeholder="请输入" value="" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">
                                            作业网格
                                            <span class="layui-font-gray layui-font-12">
                                                (工作区域的范围与考勤、报事奖励有关)
                                            </span>
                                        </label>
                                        <div class="layui-input-block">
                                            <div class="layui-row layui-col-space10 row-edge">
                                                <div class="layui-col-md6">
                                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                                        name="styleName" lay-search>
                                                        <option value="1">单个作业网格</option>
                                                        <option value="2">多个作业网格</option>
                                                    </select>
                                                </div>
                                                <div class="layui-col-md6">
                                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                                        name="styleName" lay-search>
                                                        <option value="1">报事</option>
                                                        <option value="2">巡检</option>
                                                        <option value="3">其他</option>
                                                    </select>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">
                                            工单派发频率
                                        </label>
                                        <div class="layui-input-block">
                                            <div class="layui-row layui-col-space10 row-edge">
                                                <div class="layui-col-md6">
                                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                                        name="styleName" lay-search>
                                                        <option value="1">每周</option>
                                                        <option value="2">每日</option>
                                                    </select>
                                                </div>
                                                <div class="layui-col-md6">
                                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                                        name="styleName" lay-search>
                                                        <option value="1">报事</option>
                                                        <option value="2">巡检</option>
                                                        <option value="3">其他</option>
                                                    </select>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <div class="layui-col-md12">
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label required">工单要求</label>
                                        <div class="layui-input-block">
                                            <textarea name="remark" class="layui-textarea"
                                                placeholder="请输入工单要求"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label ">关联维保计划</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="plan" placeholder="请输入" value=""
                                                class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="layui-col-md8">
                            <div class="view-map">
                                <div class="total-map">
                                    <!-- 地图信息 -->
                                    <div id="totalMapContainer" class="amap-container">
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>



                </div>
            </div>
        </div>
    </div>
</div>

<script>



    layui.use(['form', 'miniPage', 'miniAMap'], function () {
        var $ = layui.$,
            form = layui.form,
            element = layui.element,
            layer = layui.layer,
            util = layui.util,
            laydate = layui.laydate,
            miniAMap = layui.miniAMap;

        /******************** 事件 start ********************/
        // 地图页面返回事件
        $('#backBtn').on('click', function () {
            miniPage.backPageCreate()
        });
        // 普通事件
        util.on('lay-on', {
            // 关闭弹出层
            "closeBtn": function () {
               miniPage.backPageCreate()

            }
        });
           
        /******************** 事件 end ********************/

        form.render('select');
        form.render();
        // 起始日期
        laydate.render({
            elem: '#date_period_start',
            range: true
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

                // 关闭弹出层
                layer.close(index);

            });


            return false;
        });




        // 初始化地图 
        let mapCenter = miniAMap.defaults.mapCenter; // 默认北京中心点
        let map = null
        map = miniAMap.render({
            containerId: 'totalMapContainer', options: {
                zoom: 14,
                center: mapCenter // 默认北京中心点
            }
        })

        //https://lbs.amap.com/api/javascript-api-v2/documentation#maptype
        map.plugin(["AMap.MapType"], function () {
            //地图类型切换
            var type = new AMap.MapType({
                defaultType: 0,// 初始化默认图层类型。 取值为0：默认底图 取值为1：卫星图 默认值：0
                showTraffic: false,//叠加实时交通图层 默认值：false
                showRoad: false,//叠加路网图层 默认值：false

            });
            map.addControl(type);
        });







        // 缓存图层实例
        const standardLayer = new AMap.TileLayer();
        const satelliteLayer = new AMap.TileLayer.Satellite();

        // 切换基础图层（标准 / 卫星）
        $('input[name="layer-base-item"]').on('change', function () {
            if ($(this).is(':checked')) {
                const layerId = $(this).data('id');
                map.setFeatures([]);
                if (layerId === 'AMap.TileLayer') {
                    // map.add(standardLayer);
                    var selectedCardId = $('.road-item.selected').attr('id');
                    //重置中心 根据实际需求处理
                    map.setCenter(mapCenter); // 仅设置中心

                } else if (layerId === 'AMap.TileLayer.Satellite') {
                    map.add(satelliteLayer);
                }
            }
        });

    })
</script>